<template>
  <div>
    <!-- 创建查询条件 -->
    <TopFilter
      ref="formPanel"
      :list="topFilterList"
      :cols="4"
      :collapse="true"
      @filterChange="changeHandle"
    ></TopFilter>
    <!-- 创建一个查询table -->

    <FilterTable
      ref="table"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :columns="columns"
      :onColumnsChange="columns => (this.columns = columns)"
      columnsRef="visitCompositeScanMainPage"
      :isPagination="false"
      :height="120"
    ></FilterTable>
    <FilterTable
      ref="table2"
      :fetchapi="fetchApi2"
      :params="fetchParams2"
      :datakey="'rows'"
      :columns="columns2"
      :onColumnsChange="columns2 => (this.columns2 = columns2)"
      columnsRef="visitCompositeScanMainPage"
      :isPagination="false"
      :height="120"
    ></FilterTable>
    <FilterTable
      ref="table3"
      :fetchapi="fetchApi3"
      :params="fetchParams3"
      :datakey="'rows'"
      :columns="columns3"
      :onColumnsChange="columns3 => (this.columns3 = columns3)"
      columnsRef="visitCompositeScanMainPage"
      :isPagination="false"
      :height="120"
    ></FilterTable>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getVisitCompositeScan, getVisitCompositeScan2, getUnsatisfiedReasonCount } from '@/api/customerRepair/visitAnalysis/visitCompositeScan';
// import { getAllUser } from '@/api/customerRepair/usedCarVisit/resultEntry';

export default {
  mixins: [dictionary],
  // 组件注册
  // components: {
  //   RtmAlarmDetail,
  //   EditAlarmDetail
  // },
  // 绑定数据定义
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: getVisitCompositeScan,
      fetchParams: { xhrAbort: true },
      columns: this.createColumns(),
      fetchApi2: getVisitCompositeScan2,
      fetchParams2: { xhrAbort: true },
      columns2: this.createColumns2(),
      fetchApi3: getUnsatisfiedReasonCount,
      fetchParams3: { xhrAbort: true },
      columns3: this.createColumns3(),
      type: null
    };
  },
  created() {
    // this.getAllUser();
    this.getSuccess();
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  // 处理方法
  methods: {
    // 关闭页面触发事件
    // 创建查询条件
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '日期范围',
          style: { minWidth: '200px' },
          fieldName: 'inputDateS|inputDateE',
          valueFormat: 'yyyy-MM-dd'
        },
        {
          type: 'SELECT',
          label: '回访类别',
          fieldName: 'visitType',
          itemList: [
            { value: '15721001', text: '售后回访' },
            { value: '15721002', text: '销售回访' },
            { value: '15721003', text: '二手车回访' },
            { value: '15721004', text: '活动回访' },
            { value: '15721005', text: '潜客回访' },
            { value: '15721006', text: '战败回访' }
          ],
          initialValue: '15721001'
        }
      ];
    },
    createColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '回访成功率统计',
          dataIndex: 'SUCCESS',
          sorter: true,
          filter: true,
          filterType: 'input',
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '数量',
          dataIndex: 'SUCCESS_COUNTS',
          sorter: true
          // filter: true,
          // filterType: 'input'
        },
        {
          title: '比率',
          dataIndex: 'SUCCESS_RATE',
          sorter: true
          // filter: true,
          // filterType: 'input'
        }
      ];
    },
    createColumns2() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '回访满意率统计',
          dataIndex: 'SATISFIED',
          sorter: true,
          filter: true,
          filterType: 'input',
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '数量',
          dataIndex: 'SATISFIED_COUNTS',
          sorter: true
          // filter: true,
          // filterType: 'input'
        },
        {
          title: '比率',
          dataIndex: 'SATISFIED_RATE',
          sorter: true
          // filter: true,
          // filterType: 'input'
        }
      ];
    },
    createColumns3() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '不满意原因',
          dataIndex: 'BMYYYFL',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.BMYYYFL, '8201')}</span>;
          }
        },
        {
          title: '数量',
          dataIndex: 'COUNTS',
          sorter: true
          // filter: true,
          // filterType: 'input'
        }
      ];
    },
    // 查询条件触发方法
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { offset: 0, xhrAbort: false });
      this.fetchParams2 = Object.assign({}, val, { offset: 0, xhrAbort: false });
      this.fetchParams3 = Object.assign({}, val, { offset: 0, xhrAbort: false });
    },
    // 所有用户
    // async getAllUser() {
    //   const res = await getAllUser();
    //   console.log(res);
    //   this.columns.find(item => item.dataIndex === 'TRANCER').editItems = res.data.map(x => ({ value: x.userId + '', text: x.employeeName }));
    // },
    async getSuccess() {
      let data = [
        { id: '1', employeeName: '回访成功数量' },
        { id: '2', employeeName: '回访满意' },
        { id: '3', employeeName: '回访失败数量' },
        { id: '4', employeeName: '回访不满意' }
      ];
      this.columns.find(item => item.dataIndex === 'SUCCESS').editItems = data.map(x => ({ value: x.id + '', text: x.employeeName }));
      this.columns2.find(item => item.dataIndex === 'SATISFIED').editItems = data.map(x => ({ value: x.id + '', text: x.employeeName }));
    }
  }
};
</script>
